import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 1. state保存数据的对象，对象中的数据可以供所有的组件使用--通过this.$store.state.属性名,来获取state中的数据
const state = {
// 定义一个值用于存储登录后的用户名---此功能可以永久存储来做，到此处用vuex来专为 Vue.js 应用程序开发的状态管理模式
  username: ''
}
// 2.mutations里面定义着操作state中的数据函数，用过这个函数来操作数据,此函数默认传递state这个参数,还可以传递自定义参数：mmutations的触发方式用this.$store.commit('函数名',参数))来操作mutations中定义的函数
const mutations = {
// 定义设置用户名函数--回调函数
  setusername: (state, username) => {
    // 将username存储到state中的username
    state.username = username
    // 存储到永久存储--用于解决登录后页面再次刷新获取不到username
    localStorage.setItem('username', username)
  }
}
// 3.actions；是一个对象，保存的是触发mutations的函数，使用this.$store.dispatch('函数名',参数)进行异步触发(此方法一般用在要存储状态的组件中)
const actions = {
  // 定义函数
  setusernameActions: ({commit}, username) => {
    // 此处是将函数传递给mutations中的函数
    commit('setusername', username)
  }
}
// getters是一个对象，保存的是一些类似与计算属性的函数，可以通过他得到任何依赖于state的重新赋值的数据
const getters = {
  // 回调中传入state
  username: (state) => {
    return localStorage.getItem('username')
  }
}
export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})
